<template>
  <d2-container>
    <div style="width:100%;display: flex;">
      <canvas
        id="canvas"
        style="margin: 0px auto;"
        width="400"
        height="250"
      ></canvas>
    </div>
    <div
      style="width:100%;display: flex;"
      v-for="(item, index) in tabedata"
      :key="index"
    >
      <canvas
        :id="'canvas' + index"
        style="margin: 0px auto;"
        width="400"
        height="250"
      ></canvas>
    </div>
  </d2-container>
</template>
<script>
export default {
  data() {
    return {
      ctx: "",
      circleX: "",
      circleY: "",
      tabedata: [
        { ctx: "", circleX: "", circleY: "" },
        { ctx: "", circleX: "", circleY: "" },
        { ctx: "", circleX: "", circleY: "" }
      ]
    };
  },
  methods: {
    canvas_fn() {
      let canvas = document.getElementById("canvas");
      this.ctx = canvas.getContext("2d");
      this.circleX = canvas.width / 2; // 中心x坐标
      this.circleY = 150; //中心y坐标
    },
    canvas_fns(index) {
      let canvas = document.getElementById("canvas"+index);
      this.tabedata[index].ctx = canvas.getContext("2d");
      this.tabedata[index].circleX = canvas.width / 2; // 中心x坐标
      this.tabedata[index].circleY = 150; //中心y坐标
    },
    circle(r, w, c, angle = 180) {
      let ctx = this.ctx;
      // 画布将当前的状态保存
      // canvas.save();与canvas.restore();一般结合使用，.save()函数在前，.restore()函数在后，
      // 用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响
      ctx.save();
      // 开始一条路径，或重置当前的路径
      ctx.beginPath();
      // 设置线条的宽度
      ctx.lineWidth = w;
      // 设置线条的颜色
      ctx.strokeStyle = c;
      // 线条末端线帽的设置为圆形
      ctx.lineCap = "round";
      // 方法创建弧/曲线（用于创建圆或部分圆）
      ctx.arc(
        this.circleX,
        this.circleY,
        r,
        Math.PI,
        Math.PI * (1 + angle / 180)
      );
      ctx.stroke();
      // 画布取出原来所保存的状态
      ctx.restore();
    },
     circles(r, w, c, angle = 180,index) {
      let ctx =  this.tabedata[index].ctx;
      // 画布将当前的状态保存
      // canvas.save();与canvas.restore();一般结合使用，.save()函数在前，.restore()函数在后，
      // 用来保证在这两个函数之间所做的操作不会对原来在canvas上所画图形产生影响
      ctx.save();
      // 开始一条路径，或重置当前的路径
      ctx.beginPath();
      // 设置线条的宽度
      ctx.lineWidth = w;
      // 设置线条的颜色
      ctx.strokeStyle = c;
      // 线条末端线帽的设置为圆形
      ctx.lineCap = "round";
      // 方法创建弧/曲线（用于创建圆或部分圆）
      ctx.arc(
         this.tabedata[index].circleX,
         this.tabedata[index].circleY,
        r,
        Math.PI,
        Math.PI * (1 + angle / 180)
      );
      ctx.stroke();
      // 画布取出原来所保存的状态
      ctx.restore();
    },
    scale(s, span, sl, el, c) {
      let ctx = this.ctx;
      let startA = s;
      for (let i = 0; i < span; i++) {
        ctx.save();
        ctx.beginPath();
        let rad = (startA * 15 * Math.PI) / 180;
        let startX = 200 - Math.cos(rad) * sl;
        let startY = 150 - Math.sin(rad) * sl;
        let endX = 200 - Math.cos(rad) * el;
        let endY = 150 - Math.sin(rad) * el;
        // 路径移动到画布中的指定点，不创建线条
        ctx.moveTo(startX, startY);
        // 添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
        ctx.lineTo(endX, endY);
        ctx.strokeStyle = c;
        // 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
        ctx.stroke();
        ctx.restore();
        startA++;
      }
    },
    scales(s, span, sl, el, c,index) {
        
      let ctx = this.tabedata[index].ctx;
      let startA = s;
      for (let i = 0; i < span; i++) {
        ctx.save();
        ctx.beginPath();
        let rad = (startA * 15 * Math.PI) / 180;
        let startX = 200 - Math.cos(rad) * sl;
        let startY = 150 - Math.sin(rad) * sl;
        let endX = 200 - Math.cos(rad) * el;
        let endY = 150 - Math.sin(rad) * el;
        // 路径移动到画布中的指定点，不创建线条
        ctx.moveTo(startX, startY);
        // 添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
        ctx.lineTo(endX, endY);
        ctx.strokeStyle = c;
        // 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。
        ctx.stroke();
        ctx.restore();
        startA++;
      }
    },
    fillText(text, x, y, color = "#333", fontSize = "18") {
      let ctx = this.ctx;
      ctx.save();
      // 根据锚点，设置或返回文本内容的当前对齐方式    水平方向
      ctx.textAlign = "center";
      // 设置或返回在绘制文本时的当前文本基线    垂直方向
      ctx.textBaseline = "middle";
      // 设置或返回画布上文本内容的当前字体属性
      ctx.font = fontSize + "px Arial";
      ctx.fillStyle = color;
      // 在画布上绘制填色的文本
      ctx.fillText(text, x, y);
      ctx.restore();
    },
    fillTexts(text, x, y, color = "#333", fontSize = "18",index) {
      let ctx = this.tabedata[index].ctx;
      ctx.save();
      // 根据锚点，设置或返回文本内容的当前对齐方式    水平方向
      ctx.textAlign = "center";
      // 设置或返回在绘制文本时的当前文本基线    垂直方向
      ctx.textBaseline = "middle";
      // 设置或返回画布上文本内容的当前字体属性
      ctx.font = fontSize + "px Arial";
      ctx.fillStyle = color;
      // 在画布上绘制填色的文本
      ctx.fillText(text, x, y);
      ctx.restore();
    },
    round(x, y, r, fillColor = "#fff", lineWidth = 3) {
      let ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = "#7775FD";
      ctx.arc(x, y, r, 0, Math.PI * 2, false);
      ctx.fillStyle = fillColor;
      // 填充当前的图像（路径）。默认颜色是黑色
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    },
    rounds(x, y, r, fillColor = "#fff", lineWidth = 3,index) {
      let ctx = this.tabedata[index].ctx;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = "#7775FD";
      ctx.arc(x, y, r, 0, Math.PI * 2, false);
      ctx.fillStyle = fillColor;
      // 填充当前的图像（路径）。默认颜色是黑色
      ctx.fill();
      ctx.stroke();
      ctx.restore();
    },
    triangle(angle) {
      let ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = 1;
      let rad = (angle * Math.PI) / 180;
      let startX = this.circleX - Math.cos(rad) * 40;
      let startY = this.circleY - Math.sin(rad) * 40;
      ctx.moveTo(startX, startY);
      let rad1 = ((90 - angle) * Math.PI) / 180;
      let startX1 = this.circleX - Math.cos(rad1) * 11;
      let startY1 = this.circleY + Math.sin(rad1) * 11;
      ctx.lineTo(startX1, startY1);
      let rad2 = ((90 - angle) * Math.PI) / 180;
      let startX2 = this.circleX + Math.cos(rad2) * 11;
      let startY2 = this.circleY - Math.sin(rad2) * 11;
      ctx.lineTo(startX2, startY2);
      ctx.closePath();
      ctx.fillStyle = "#8382FF";
      ctx.fill();
      ctx.strokeStyle = "#8382FF";
      ctx.stroke();
      ctx.restore();
    },
    triangles(angle,index) {
      let ctx = this.tabedata[index].ctx;
      ctx.save();
      ctx.beginPath();
      ctx.lineWidth = 1;
      let rad = (angle * Math.PI) / 180;
      let startX = this.tabedata[index].circleX - Math.cos(rad) * 40;
      let startY = this.tabedata[index].circleY - Math.sin(rad) * 40;
      ctx.moveTo(startX, startY);
      let rad1 = ((90 - angle) * Math.PI) / 180;
      let startX1 = this.tabedata[index].circleX - Math.cos(rad1) * 11;
      let startY1 = this.tabedata[index].circleY + Math.sin(rad1) * 11;
      ctx.lineTo(startX1, startY1);
      let rad2 = ((90 - angle) * Math.PI) / 180;
      let startX2 = this.tabedata[index].circleX + Math.cos(rad2) * 11;
      let startY2 = this.tabedata[index].circleY - Math.sin(rad2) * 11;
      ctx.lineTo(startX2, startY2);
      ctx.closePath();
      ctx.fillStyle = "#8382FF";
      ctx.fill();
      ctx.strokeStyle = "#8382FF";
      ctx.stroke();
      ctx.restore();
    },
    draw(angle) {
      this.ctx.clearRect(0, 0, this.circleX * 2, this.circleY * 2);
      this.circle(96, 8, "#F8F8F8");
      this.circle(80, 2, "#BBBAFF");
      this.circle(64, 12, "#F2F2F2");
      this.circle(40, 2, "#F8F8F8");
      this.circle(24, 2, "#F8F8F8");
      this.scale(0, 13, 65, 62, "#F2F2F2");
      this.scale(0.5, 12, 65, 58, "#F2F2F2");
      this.fillText("低", 100, 100);
      this.fillText("中", 165, 40);
      this.fillText("高", 235, 40);
      this.fillText("预警", 300, 80);
      this.fillText("警告", 320, 120);
      this.fillText("棉花", 200, 180, "#9A9A9A", "16");
      this.fillText(40, 200, 200, "#62C513", "12");
      this.round(120, 150, 4);
      this.round(150, 88, 4);
      this.round(200, 70, 4);
      this.round(250, 88, 4);
      this.round(266, 105, 4);
      this.round(280, 150, 4);
      this.round(200, 150, 10, "#8382FF", 1);
      if (angle > 0) {
        this.circle(64, 12, "#7775FD", angle); //这里换选中的颜色
      }
      this.triangle(angle);
      this.round(200, 150, 4);
    },
    draws(angle,index) {
      this.tabedata[index].ctx.clearRect(0, 0, this.tabedata[index].circleX * 2, this.tabedata[index].circleY * 2);
      this.circles(120, 8, "#F8F8F8",180,index);
      this.circles(100, 2, "#BBBAFF",180,index);
      this.circles(80, 12, "#F2F2F2",180,index);
      this.circles(50, 2, "#F8F8F8",180,index);
      this.circles(30, 2, "#F8F8F8",180,index);
      this.scales(0, 13, 65, 62, "#F2F2F2",index);
      this.scales(0.5, 12, 65, 58, "#F2F2F2",index);
      this.fillTexts("低", 60, 100,"#333","18",index);
      this.fillTexts("中", 135, 20,"#333","18",index);
      this.fillTexts("高", 265, 20,"#333","18",index);
      this.fillTexts("预警", 335, 80,"#333","18",index);
      this.fillTexts("警告", 350, 120,"#333", "18",index);
      this.fillTexts("棉花", 200, 180, "#9A9A9A", "16",index);
      this.fillTexts(40, 200, 200, "#62C513", "12",index);
      this.rounds(100, 150, 4,"#fff",3,index);
      this.rounds(125, 84, 4,"#fff", 3,index);
      this.rounds(200, 50, 4,"#fff", 3,index);
      this.rounds(275, 85, 4,"#fff", 3,index);
      this.rounds(285, 100, 4,"#fff", 3,index);
      this.rounds(300, 150, 4,"#fff", 3,index);
      this.rounds(200, 150, 10, "#8382FF", 1,index);
      if (angle > 0) {
        this.circles(80, 12, "#7775FD", angle,index); //这里换选中的颜色
      }
      this.triangles(angle,index);
      this.rounds(200, 150, 4, "#fff", 3,index);
    }
  },
  mounted() {
    this.canvas_fn();
    for(let i = 0;i<this.tabedata.length;i++) {
         this.canvas_fns(i)
         this.draws(40,i);
    }
    this.draw(180);
  }
};
</script>
